<template>
	<div class="orderdetails">
		<div class="settlementlist" @click='gotoeditaddress()'>
			<div class="settlementlistl">
				<image src="../../../static/settlement/address.png" class='img40 chooseimg'></image>
				<div class="addressabout">
					<div class="addressaboutt fsize285">
						<div class="addressname">陈五五</div>
						<div class="addresscall">12345678910</div>
					</div>
					<div class="addressaboutb fsize24l">广东省，广州市，荔湾区，信义路24号</div>
				</div>
			</div>
			<div class="settlementlistr">
				<image src="../../../static/details/goto.png" class='img32 editimg'></image>
			</div>
		</div>
		<div class="bcbox"></div>
		<div class="settlementlistbox">
			<div class="orderidbox fsize28">
				<div class="orderidtxt">
					订单详情
				</div>
			</div>
			<div class="settlementitem" v-for = 'item in 2'>
				<image src="../../../static/details/2222.png" class="img160" mode=""></image>
				<div class="">
					<div class="fls fsize28">
						<div class="settlementname">
							长白母猪_母猪不拼价格拼…
						</div>
						<div class="settlementprice">
							￥ 1080
						</div>
					</div>
					<div class="flx fsize24 flsb">
						<div class="settlementstype">商品规格：规格规格规格规</div>
						<div class="settlementcunt">数量：1</div>
					</div>
				</div>
			</div>
			<div class="flsb fsize24t flx">
				<span class="pricetype">商品总价</span>
				<span class="pricetype">¥ 4320</span>
			</div>
			<div class="flsb fsize24t flx">
				<span class="pricetype">实付金额</span>
				<span class="pricetype">¥ 4320</span>
			</div>
		</div>
		<div class="bcbox"></div>
		<div class="flsb fsize24t lh72">
			<span class="pricetype">买家留言</span>
			<span class="pricetype fsize24s">麻烦坚持好再发出，请保证质量…</span>
		</div>
		<div class="bcbox"></div>
		<div class="flsb fsize24t flx hl40">
			<span class="pricetype fsize24">订单号</span>
			<span class="pricetype">20190917154285258</span>
		</div>
		<div class="flsb fsize24t flx hl40">
			<span class="pricetype fsize24">订单状态</span>
			<span class="pricetype">已支付</span>
		</div>
		<div class="flsb fsize24t flx hl40">
			<span class="pricetype fsize24">订单创建时间</span>
			<span class="pricetype">2019-9-17  12:22:07</span>
		</div>
		<div class="flsb fsize24t flx hl40">
			<span class="pricetype fsize24">订单更新时间</span>
			<span class="pricetype">2019-9-17  12:22:07</span>
		</div>
		<div class="flsb fsize24t flx hl40">
			<span class="pricetype fsize24">运单号</span>
			<span class="pricetype">1561651751065165</span>
		</div>
		<div class="bcbox"></div>
		<div class="waitwritelist">
			<div class="inputbox flcm">
				<div class="label fsize28l">运单号：</div>
				<input type="text" placeholder="输入内容" class="standard"/>
			</div>
			<div class="inputbox flcm pickbox">
				<div class="label fsize28l">承运公司：</div>
				<picker @change="bindPickerChange" :range="array">
						<input type="text" placeholder="请选择"  v-model="now" class="standard"/>
						<image src="../../../static/administrator/down.png" class="img32 pickdownbtn" mode=""></image>	
				</picker>
			</div>
		</div>
		<div class="savebtn" @click='gotoswinelist()'>保存</div>
	</div>


</template>

<script>
	export default {
		data() {
			return {
				now:'',
				hour: 10,
				minute: 50,
				second: 32,
				nowday:'2020-05-18',
				array:['顺丰','京东','苏宁易购']
			};
		},
		onLoad: function() {

		},
		methods: {
			gotoeditaddress(e) {
				uni.navigateTo({
					url: '../editaddress/editaddress'
				});
			},
			gotoswinelist(e) {
				uni.navigateTo({
					url: '../swinelist/swinelist'
				});
			},
			bindPickerChange(e) {
				this.now = this.array[e.target.value]
			},
			bindDateChange(e) {
				this.nowday = e.target.value
			},

		}
	}
</script>

<style lang="less">
	.pickdownbtn {
		right: 24rpx;
		top: 24rpx;
	}
	.settlementlist {
		padding:20rpx 32rpx;
		display: flex;
		justify-content: space-between;
		.settlementlistl {
			display: flex;
			.chooseimg {
				margin: 0  20rpx 0 0;
			}
		}
		.editimg{
			margin: 29rpx  0;
		}
	}
	.addressabout {
		display: flex;
		// flex-wrap: wrap;
		flex-direction: column;
		justify-content: space-between;
		.addressaboutt {
			display: flex;
			line-height:34rpx;
			.addresscall {
				margin-left: 28rpx;
			}
		}
		.addressaboutb {
			line-height:54rpx;
			width: 558rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	.settlementlist {
		padding:20rpx 32rpx;
		display: flex;
		justify-content: space-between;
		.settlementlistl {
			display: flex;
			.chooseimg {
				margin: 0  20rpx 0 0;
			}
		}
		.editimg{
			margin: 29rpx  0;
		}
	}
	.addressabout {
		display: flex;
		// flex-wrap: wrap;
		flex-direction: column;
		justify-content: space-between;
		.addressaboutt {
			display: flex;
			line-height:34rpx;
			.addresscall {
				margin-left: 28rpx;
			}
		}
		.addressaboutb {
			line-height:54rpx;
			width: 558rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
	
	.settlementlistbox {
		padding: 32rpx;
		.settlementitem {
			display: flex;
			margin-bottom: 20rpx;
			image {
				margin-right: 16rpx;
			}
			.settlementname {
				width: 410rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			
		}
	}
	.settlementcunt {
		margin-top: 8rpx;
	}
	.fls {
		display: flex;
	}
	
	.message {
		padding: 32rpx;
		display: flex;
		.messagelable {
		}
		.messagetitle {
			width: 546rpx;
		}
	}
	.wxpay {
		padding: 32rpx;
		display: flex;
		image {
			margin-top: 6rpx;
			margin-right: 16rpx;
		}
	}
	
	.orderidbox{
		margin-bottom: 16rpx;
		line-height: 40rpx;
		.ordertype{
			color:rgba(227,19,75,1);
		}
	}
	
	.allcount {
		margin-right: 24rpx;
	}
	.paycountbtn {
		width:174rpx;
		height:68rpx;
		background:rgba(255,255,255,1);
		border-radius:12rpx;
		border:2rpx solid rgba(24,108,242,1);
		text-align: center;
		color: rgba(24,108,242,1);
		line-height: 68rpx;
		margin-top: 32rpx;
	}
	
	.lh72{
		line-height: 72rpx;
		padding: 0 32rpx;
	}
	.hl40 {
		line-height: 72rpx;
		padding: 0 32rpx;
		margin-top: 16rpx;
	}
	
	
	.waitwritelist {
		padding:32rpx 32rpx 0;
		.inputbox {
			margin-bottom: 32rpx;
			.label {
				width: 140rpx;
			}
		}
	}
	.standard {
		width:546rpx;
		height:80rpx;
		box-sizing: border-box;
		border-radius:12rpx;
		border:2rpx solid rgba(190,190,190,0.3);
		padding-left: 24rpx;
		font-size:28rpx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(153,153,153,1);
		-webkit-box-shadow: inset 0 2rpx 2rpx rgba(0, 0, 0, .075);
		box-shadow: inset 0 2rpx 2rpx rgba(0, 0, 0, .075);
		-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
		-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
		transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
	}
	.orderdetails {
		.savebtn {
			position: relative;
			margin-top: 96rpx;
			margin-left: 32rpx;
		}
	}
</style>
